<template>
  <div>
    <fks-dialog :title="title" :visible="true" width="960px" @close="close">
      <div slot="title">
        <i v-if="treeData.operateType == 'add'" class="fks-icon-plus" />
        <i v-if="treeData.operateType == 'edit'" class="fks-icon-edit" />
        {{ title }}
      </div>
      <fks-form
        ref="form"
        :model="form"
        class="form"
        label-width="85px"
        :rules="rules"
      >
        <fks-form-item :label="LANG.NAME" prop="treeName" :span="12">
          <fks-input v-model="form.treeName" maxlength="50" show-word-limit />
        </fks-form-item>
        <fks-form-item prop="treeUrl" :span="12">
          <span slot="label">
            <span>{{ LANG.INTERFACE }}</span>
            <fks-tooltip placement="top-start">
              <div
                slot="content"
                style="font-size: 14px; line-height: 20px"
                class="tips-container"
              >
                {{ LANG.INTERFACE_TIP }}
              </div>
              <i class="fks-icon-question" />
            </fks-tooltip>
          </span>
          <fks-input v-model="form.treeUrl" maxlength="255" show-word-limit />
        </fks-form-item>
      </fks-form>
      <template slot="footer" style="text-align: right">
        <fks-button
          v-debounce="submit"
          type="primary"
          :loading="loading"
          :icon="checkResult ? 'fks-icon-success' : 'fks-icon-check'"
        >
          {{ loading ? LANG.CHECKING : LANG.SAVE }}
        </fks-button>
      </template>
    </fks-dialog>
  </div>
</template>
<script>
import { addDataScopeTree, editDataScopeTree, checkUrl } from '../api'
export default {
  props: {
    treeData: {
      default() {
        return {
          treeName: '',
          treeUrl: '',
          type: '',
          portalId: '',
          treeData: []
        }
      }
    }
  },
  data() {
    return {
      title: '',
      form: {
        treeName: '',
        treeUrl: ''
      },
      checkResult: '',
      loading: false,
      treeTable: []
    }
  },
  computed: {
    rules() {
      return {
        treeName: [
          {
            required: true,
            trigger: 'blur'
          }
        ],
        treeUrl: [
          {
            required: true,
            trigger: 'blur'
          }
        ]
      }
    },
    multiPortal() {
      return this.$store.getters.multiPortal
    },
    portal() {
      return this.$store.state.portal
    }
  },
  watch: {
    'treeData.operateType': {
      deep: true,
      immediate: true,
      handler(val) {
        if (val == 'edit') {
          this.title = this.LANG.EDIT
          this.form = JSON.parse(JSON.stringify(this.treeData))
        } else {
          this.title = this.LANG.ADD
        }
      }
    },
    'form.treeUrl': {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.checkResult = ''
        }
      }
    }
  },
  methods: {
    close() {
      this.$refs.form.resetFields()
      this.checkResult = ''
      this.$parent.visible = false
      this.$parent.getDataScopeTreeList()
    },
    checkUrl() {
      return new Promise((resolve, reject) => {
        checkUrl(this.form.treeUrl)
          .then((res) => {
            if (res.status) {
              let result = res.data.some((item) => {
                return item.id && item.parentId && item.content && item.children
              })

              if (!result) {
                this.$message.error(this.LANG.CHECK_FAILED)
              }
              resolve(result)
            }
            resolve(false)
          })
          .catch((err) => {
            resolve(false)
          })
      })
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true
          if (this.form.treeUrl !== this.treeData.treeUrl) {
            let result = await this.checkUrl()
            if (!result) {
              this.loading = false
              return false
            }
          }
          if (this.treeData.operateType == 'add') {
            this.addDataScopeTree()
          } else if (this.treeData.operateType == 'edit') {
            this.editDataScopeTree()
          }
        }
      })
    },
    addDataScopeTree() {
      let params = {
        treeName: this.form.treeName,
        treeUrl: this.form.treeUrl,
        type: this.multiPortal ? this.portal.type : null,
        portalId: this.multiPortal ? this.portal.id : null
      }
      addDataScopeTree(params)
        .then((res) => {
          this.loading = false
          if (res.status) {
            this.close()
            this.$message.success(this.LANG.ADD_SUCCESS)
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    editDataScopeTree() {
      let params = {
        id: this.form.id,
        treeName: this.form.treeName,
        treeUrl: this.form.treeUrl,
        type: this.multiPortal ? this.portal.type : null,
        portalId: this.multiPortal ? this.portal.id : null
      }
      editDataScopeTree(params)
        .then((res) => {
          this.loading = false
          if (res.status) {
            this.close()
            this.$message.success(this.LANG.EDIT_SUCCESS)
          }
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .form {
  .fks-form-item__content {
    display: flex;
  }

  .fks-icon-success {
    color: green;
  }

  .fks-icon-error {
    color: red;
  }
}
</style>